<template>
    <div class="container">
        <div class="loan-product">
            <header>
                <router-link to="/">借贷需求 / </router-link>
                贷款产品
            </header>
            <div v-if="messageList.length > 0" class="focus-pointer mb30">
                <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="company-num-list flex-box-align mb30">
                <li class="flex">
                    <div class="li-top">本周新增贷款产品</div>
                    <div>{{returnPrice(info.productTotal1Week)}}</div>
                </li>
                <li class="flex">
                    <div class="li-top">本周新增贷款产品金额</div>
                    <div>{{returnPrice(info.productInvest1Week)}}</div>
                </li>
                <li class="flex">
                    <div class="li-top">累积贷款产品</div>
                    <div>{{returnPrice(info.productTotal)}}</div>
                </li>
                <li class="flex">
                    <div class="li-top">累积贷款产品金额</div>
                    <div>{{returnPrice(info.productInvest)}}</div>
                </li>
            </ul>
            <div class="search-modal mb30">
                <div class="" style="margin-bottom: 20px">
                    <span>查询及添加</span>
                    <el-button type="primary" size="small" @click="getList">查询</el-button>
                    <el-button type="primary" size="small" @click="handleClickAdd">添加</el-button>
                </div>
                <div class="flex-box-container">
                    <div class="search-item loan">
                        <div class="search-title">贷款额度：</div>
                        <el-input v-model="configList.param.loanFundMin" placeholder="请输入" style="width: 80px"></el-input> 万元
                        ~
                        <el-input v-model="configList.param.loanFundMax" placeholder="请输入" style="width: 80px"></el-input> 万元
                        <!--<el-select v-model="configList.param.singleInvestFund" placeholder="请选择">-->
                            <!--<el-option-->
                                <!--label="全部"-->
                                <!--value="">-->
                            <!--</el-option>-->
                            <!--</el-option>-->
                            <!--<el-option-->
                                    <!--v-for="item in singleInvestMoneyList"-->
                                    <!--:key="item.key"-->
                                    <!--:label="item.value"-->
                                    <!--:value="item.key">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                    </div>
                    <div class="search-item flex-box-align" style="">
                        <span class="search-title">贷款适用地区：</span>
                        <v-distpicker :province="province" :city="city" :area="district"
                                      @province="selectProvince"
                                      @city="selectCity"
                                      @area="selectArea"
                        ></v-distpicker>
                    </div>
                    <div class="search-item">
                        <div class="search-title">贷款者盈利要求：</div>
                        <el-select filterable v-model="configList.param.applyProfit" placeholder="请选择">
                            <el-option
                            label="全部"
                            value="">
                            </el-option>
                            <el-option
                            label="盈利"
                            value="y">
                            </el-option>
                            <el-option
                            label="无要求"
                            value="n">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <div class="search-title">资金主体：</div>
                        <el-select filterable v-model="configList.param.fundBody" placeholder="请选择">
                            <el-option
                                label="全部"
                                value="">
                            </el-option>
                            <el-option
                                    v-for="item in fundBodyList"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>

            <div class="">
                <table-list ref="tableList" :tableConfig='configList'>

                    <el-table-column  slot=""  align="center" label="">
                        <template slot-scope="scope">
                            <span></span>
                        </template>
                    </el-table-column>
                    <el-table-column  slot="loan"  align="center" label="贷款额度">
                        <template slot-scope="scope">
                            <span>{{scope.row.loanFundMin}}万 ~ {{scope.row.loanFundMax}}万</span>
                        </template>
                    </el-table-column>
                    <!--<el-table-column  slot="status"  align="center" label="当前状态">-->
                        <!--<template slot-scope="scope">-->
                            <!--<span v-if="scope.row.status == 'on'">上架</span>-->
                            <!--<span v-else>下架</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column class="btn" label="操作" slot="btn" align="center" >
                        <template slot-scope="scope">
                            <el-button  type="primary" size="small" style="background: #A0A0A0;border-color:#A0A0A0">
                                <router-link :to="{ path: '/loan/productDetail', query: {id:scope.row.id}}"  style="color: #fff;">查看</router-link>
                            </el-button>
                            <el-button  type="primary" size="small" @click="handleClickOn(scope.row.id)" v-if="scope.row.status == 'off'">上架</el-button>
                            <el-button  type="primary" size="small" @click="handleClickOff(scope.row.id)" style="background: #ED7018;border-color: #ED7018" v-else-if="scope.row.status == 'on'">下架</el-button>
                        </template>
                    </el-table-column>
                </table-list>
            </div>
        </div>
    </div>
</template>

<script>
    import {parseUrlParams} from "../../util";
    let CONSTANT = require('../../constant/constant.js'),
        common = require('../../common.js');
    export default {
        data() {
            return {
                singleInvestMoneyList: [],
                investTypeList: [],
                firstIndustryList: [],
                fundBodyList: [],
                financeLevelList: [],
                investList: [],
                props: {
                    label: "value",
                    value: 'key',
                    children: 'childs'
                },
                info:'',
                selectedOptions: [],

                configList:{
                    url:CONSTANT.URL.FINANCE.PRODUCTLIST,
                    configList:[
                        {
                            label:'贷款产品',
                            prop: "productName",
                        },
                        {
//                            label:'',
//                            prop: ""
                            slot: "loan"
                        },
                        {
                            label:'贷款最高期限',
                            prop: "investYearDesc"
                        },
                        {
                            label:'提交时间',
                            prop: "gmtCreated"
                        },
                        {
                            label:'当前状态',
                             prop: "statusDesc"
                        },
                        {
                            slot:'btn'
                        }
                    ],
                    param:{
                        investType: null,
                        loanFundMin: null,
                        loanFundMax: null,
                        regCityCode: null,
                        regProvinceCode: null,
                        fundBody: null,
                        financeLevel: null,
                        investYear: null,
                        firstIndustry: null,
                        secondIndustry: null,
                        thirdIndustry: null,
                        applyProfit:null
                    },
                    type:'',
                    width:'',
                    isPagination:true
                },

                city: "",
                province: "",
                district: "",
                auditStatusList: [
                    {
                        value: "init",
                        label: "待审核"
                    },
                    {
                        value: "pass",
                        label: "已审核"
                    },
                    {
                        value: "reject",
                        label: "拒绝"
                    }
                ],
                num: 0,
                messageList: []
            }
        },
        components: {
            'table-list':() => import('../common/my-table')
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            this.getDictionary("single_invest_fund", (data) => {
                this.singleInvestMoneyList = data.data.bussData
            })
            this.getDictionary("invest_type", (data) => {
                this.investTypeList = data.data.bussData
            })
            this.getDictionary("first_industry", (data) => {
                this.firstIndustryList = data.data.bussData
            })
            this.getDictionary("finance_level", (data) => {
                this.financeLevelList = data.data.bussData
            })
            this.getDictionary("fund_body", (data) => {
                this.fundBodyList = data.data.bussData
            })
            this.getDictionary("invest_year", (data) => {
                this.investList = data.data.bussData
            })
            this.getTotal()
        },
        methods:{
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            returnPrice(num){
                return common.returnNum(num)
            },
            getTotal() {
                let url = CONSTANT.URL.REPORT.FINDPRODUCTREPORTDATA,
                data = {};
                common.requestAjax(url, JSON.stringify(data), {}, (data) => {
                    if (data.status == 200) {
                        this.info = data.data.bussData;
                    }
                })
            },
            getList(){
                for (let i in this.configList.param) {
                    if (!this.configList.param[i]) {
                        delete this.configList.param[i]
                    }
                }
                this.$refs.tableList.getList()
            },
            getDictionary(params, callback) {
                let url = CONSTANT.URL.SYS.LOADDICTIONARY;
                common.requestAjax(url, {codeType: params}, {}, callback);
            },
            getUserType(params, callback) {
                let url = CONSTANT.URL.COMPANY.USERTYPE;
                common.requestAjax(url, {userType: params}, {}, callback)
            },
            selectProvince(val) {
                this.configList.param.regProvinceCode = val.code
            },
            selectCity(val) {
                this.configList.param.regCityCode = val.code
            },
            selectArea(val) {

            },
            handleChange(val) {
                val.map( (item, index) => {
                    if (index == 0) {
                        this.configList.param.firstIndustry = item;
                    }
                    if (index == 1) {
                        this.configList.param.secondIndustry = item;
                    }
                    if (index == 2) {
                        this.configList.param.thirdIndustry = item;
                    }
                })
            },
            handleClickSearch() {

            },
            handleClickAdd() {
                this.$router.push("/loan/productEdit")
            },
            handleClickOn(id) {
                let url = CONSTANT.URL.FINANCE.ONOROFFPRODUCT;
                common.requestAjax(url, JSON.stringify({productId: id, status: "on"}), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        this.getList()
                    }
                })
            },
            handleClickOff(id) {
                let url = CONSTANT.URL.FINANCE.ONOROFFPRODUCT;
                common.requestAjax(url, JSON.stringify({productId: id, status: "off"}), {}, (data) => {
                    if (data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        })
                        this.getList()
                    }
                })
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .container {
        .mb30 {
            margin-bottom: 20px;
        }
        .loan-product {
            header {
                margin: 19px 0;
                font-size: 14px;
                color: #333;
                a {
                    color: #999;
                }
            }
            .focus-pointer {
                font-size: 14px;
                height: 70px;
                line-height: 70px;
                background-color: #fff;
                padding-left: 18px;
                white-space: nowrap;
            }
            .search-modal {
                background: #fff;
                padding: 20px 0 0px 18px;
                .btns {
                    width: 73px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 4px;
                    background-color: #ED7018;
                    display: inline-block;
                    cursor: pointer;
                    &:hover{
                     background-color: #ED9000;
                     transition:all .2s linear
                    }
                }
                .btn-search {
                    margin: 0 20px 0 24px;
                }
                .search-item {
                    margin-right: 54px;
                    margin-bottom: 29px;
                    &:last-child {
                        margin-right: 0;
                    }
                    .search-title {
                        display: inline-block;
                        color: #323232;
                        font-size: 14px;
                    }
                    .el-input {
                         width: 160px;
                        display: inline-block;
                    }
                    .el-cascader{
                        width: 160px;
                    }
                    .el-select {
                        width: 160px;
                    }
                }
            }
        }
    }
</style>
